<template>
	<view class="pb-safe-area">
		<view class="tab p-4" v-if="navList.length">
			<view class="flex-1 bg-white rounded-4">
				<view class="flex">
					<text class="flex-1 py-4 text-center h9" @tap="navClick(item)"
						:class="item.scene == search.scene ? 'text-primary font-weight-600' : ''"
						v-for="(item, index) in navList" :key="index" :id="item.scene">{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view v-if="list.length > 0" class="flex flex-column grid-gap-4 p-4">
			<view class="bg-white rounded-4 p-4" v-for="(item, index) in list" :key="index">
				<x-comment-item :item="item" />
			</view>
			<x-more :status="loading" @load="getList()"></x-more>
		</view>
		<view class="vh-50 flex flex-center" v-else>
			<x-empty type="log" text="暂无评论"></x-empty>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { $api } from '@/utils';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
const list = ref([]);
const loading = ref('loadmore');
const navList = ref([]);
const search = ref({
	page: 1,
	limit: 10,
	id: '',
	action: '',
	scene: 'all'
});
const getCommentStatistics = () => {
	$api.Comment.statistics(search.value).then((data: any) => {
		navList.value = data.navList;
	})
}
const navClick = (item: any) => {
	search.value.scene = item.scene;
	search.value.page = 1;
	list.value = [];
	loading.value = 'loadmore';
	getList();
}
const getList = () => {
	if (loading.value !== 'loadmore') { return; }
	loading.value = 'loading';
	$api.Comment.list(search.value).then((data: any) => {
		list.value = [...list.value, ...data.data];
		search.value.page++;
		if (data.current_page >= data.last_page) {
			nextTick(() => {
				loading.value = 'nomore';
			})
		}
	}).catch(() => {
		loading.value = 'nomore';
	}).finally(() => {
		if (loading.value === 'loading') {
			loading.value = 'loadmore';
		}
	})
}
onReachBottom(() => {
	getList();
})
onLoad((options: any) => {
	search.value.id = options.id;
	search.value.action = options.action;
	nextTick(() => {
		getList();
		getCommentStatistics();
	})
})
</script>

<style lang="scss" scoped>
.tab {
	position: sticky;
	/* #ifdef H5 */
	top: var(--window-top);
	/* #endif */
	/* #ifndef H5 */
	top: 0;
	/* #endif */
	z-index: 999;
	background-color: $uni-bg-color-grey;

	&-body {
		height: 50px;
		line-height: 50px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: 20px;

		&-item {
			padding: 0 10px;
			word-break: nowrap;
			white-space: nowrap;
		}
	}
}
</style>
